<template>
	<view class="JCvideoMsg_wp" v-if="visible" id="popup" @touchmove.stop.prevent="touchM">
		<video class="JCvideoMsg_video" :src="jcvideoMsgInfo.vod_url" autoplay :muted="true" loop :controls="false" :show-play-btn="false" :show-center-play-btn="false"  object-fit="cover" :poster="jcvideoMsgInfo.image" @error="errorCideo()">
			<cover-view class="JCvideoMsg_block" @click="$navTo('/pages/user/Livebroadcastinfo?roomid='+jcvideoMsgInfo.isshow)"></cover-view>
			<cover-view class="JCvideoMsg_close" @click.stop="JCclose()">×</cover-view>
		</video>
		
		<view class="JCvideoMsg_msg" @click="$navTo('/pages/user/Livebroadcastinfo?roomid='+jcvideoMsgInfo.isshow)">
			<view class="JCvideoMsg_Notes">
				<text></text>
				<text></text>
				<text></text>
			</view>
			<text>直播中</text>
		</view>
	</view>
</template>

<script>
export default{
	name:'concat',
	props:{
		jcvideoMsgInfo:{
			type:Object,
			default:()=>{}
		},
		visible:{
			type:Boolean,
			default:true
		},
		JMsgTop:{
			type:[String,Number],
			default:290
		}
	},
	data(){
		return {
			JMsgScoll:0,
			JMsgScollY:0,
		}
	},
	methods:{
		//关闭提示框
		JCclose(){
			this.$emit('update:visible',false)
		},
		// 提示框移动
		touchM(e) {
			var JMsgTop = e.changedTouches[0].clientY-65;
			this.$emit('update:JMsgTop',JMsgTop)
			 e.stopPropagation();
			  e.preventDefault();
			 return true;
		},
		//出现错误
		errorCideo(){
			this.JCclose();
		},
	}
}
</script>

<style lang="scss">
page{
	margin: 0;
	padding: 0;
}
.JCvideoMsg_wp{
	margin-right: 10px;
	padding: 0;
	font-size: 0;
}
.JCvideoMsg_video{
	border: 1px $base-color solid;
	height: 130px;
	width: 160upx;
}
.JCvideoMsg_close{
	position: absolute;
	right: 0;
	background-color: rgba(0,0,0,0.4);
	color: #fff;
	height: 25px;
	line-height: 25px;
	font-size: 18px;
	text-align: center;
	width: 25px;
}
.JCvideoMsg_block{
	position: absolute;
	height: 100%;
	width: 100%;
}
.JCvideoMsg_msg{
	background-color: $base-color;
	color: #fff;
	height: 20px;
	font-size: 10px;
	text-align: center;
	width: 160upx;
}
.JCvideoMsg_msg>text{
	vertical-align: middle;
}
.JCvideoMsg_Notes{
	display: inline-block;
}
.JCvideoMsg_Notes text{
	display: inline-block;
	background-color: #fff;
	border-radius: 2px;
	height: 10px;
	margin-right: 3px;
	width: 3px;
	vertical-align: middle;
}
.JCvideoMsg_Notes text:nth-child(1){
	animation: JANotes1 2s linear infinite;
}
.JCvideoMsg_Notes text:nth-child(2){
	animation: JANotes2 2s linear infinite;
}
.JCvideoMsg_Notes text:nth-child(3){
	animation: JANotes3 2s linear infinite;
}
@keyframes JANotes1{
	0%{
		transform: scaleY(0.1);
	}
	25%{
		transform: scaleY(0.5);
	}
	50%{
		transform: scaleY(1);
	}
	75%{
		transform: scaleY(0.5);
	}
	100%{
		transform: scaleY(0.1);
	}
}
@keyframes JANotes2{
	0%{
		transform: scaleY(1);
	}
	25%{
		transform: scaleY(0.5);
	}
	50%{
		transform: scaleY(0.1);
	}
	75%{
		transform: scaleY(0.5);
	}
	100%{
		transform: scaleY(1);
	}
}
@keyframes JANotes3{
	0%{
		transform: scaleY(0.5);
	}
	25%{
		transform: scaleY(0.1);
	}
	50%{
		transform: scaleY(0.5);
	}
	75%{
		transform: scaleY(1);
	}
	100%{
		transform: scaleY(0.5);
	}
}

</style>
